<template>
  <div style="display: flex;flex-direction: column;width: 100%">
    <Header :activeName="activeName"></Header>
    <div style="display: flex;margin-top: 90px;height: 30px;line-height: 30px;justify-content: center;">
      <el-breadcrumb :separator-icon="ArrowRight" style="height: 30px;width: 80%;align-items: center;line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/course'}">健身课程</el-breadcrumb-item>
        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="main">
      <div class="detail-container">
        <!--        <div class="detail-img-c">
                  <img src="@/assets/paobu.jpg" alt="跑步"/>

                </div>-->
        <el-carousel class="detail-img-c" height="500px" v-if="course.picSet && JSON.parse(course.picSet).length > 0">
          <el-carousel-item v-for="p in JSON.parse(course.picSet)" :key="p">
            <img :src="p" alt="图集"/>
          </el-carousel-item>
        </el-carousel>
        <el-carousel class="detail-img-c" height="500px" v-else-if="course.pic">
          <el-carousel-item>
            <img :src="course.pic" alt="图集"/>
          </el-carousel-item>
        </el-carousel>
        <img v-else :src="noPic" alt="图片"/>
        <div class="pane-c">
          <el-tabs v-model="activeTab" class="detail-tabs" @tab-click="handleClick">
            <el-tab-pane class="tab-p" label="课程介绍" name="first">
              <el-row :gutter="20">
                <el-col :span="4">课程名称:</el-col>
                <el-col :span="20" style="text-align: left;color: red">{{ course.name }}</el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col :span="4">课程费用:</el-col>
                <el-col :span="20" style="text-align: left;color: red">￥{{ course.fees }}</el-col>
              </el-row>
              <el-row style="margin-top: 20px">
                <el-col :span="4">课程介绍:</el-col>
                <el-col :span="20" style="text-align: left;">{{ course.description }}</el-col>
              </el-row>
              <div style="position: absolute;bottom: 0">
                <span>预约人数:<i style="color: red">{{ course.reserveCnt }}</i></span>
                <span style="margin-left: 30px;">剩余名额:<i
                    style="color: red">{{ course.personCnt - course.reserveCnt }}</i></span>
              </div>
            </el-tab-pane>
            <el-tab-pane class="tab-p" label="课程计划" name="second">
              <el-row :gutter="20" v-for="plan in coursePlanArr">
                <el-col :span="5">{{ plan.name }}</el-col>
                <el-col :span="19" style="text-align: left;">{{ plan.description }}</el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          <div style="height: 30px;margin-top: 10px;">
            <el-button type="primary" size="default" @click="reserve">预约报名</el-button>
          </div>
        </div>
      </div>
      <el-divider border-style="dashed"></el-divider>
      <div class="recommender-container">
        <div class="recommender">
          为你推荐
        </div>
        <div class="recommender-list">
          <swiper
              :slides-per-view="5"
              :space-between="20"
              @swiper="onSwiper"
              @slideChange="onSlideChange"
          >
            <swiper-slide v-for="item in recommenders">
              <a :href="'/course/detail?cid=' + item.id">
                <img :src="paobuji" style="width: 300px;height: 250px;" alt="paobuji"/>
              </a>
            </swiper-slide>
          </swiper>
          <!-- 修改箭头颜色示范 -->
          <div class="swiper-button-prev swiper-button-white" @click="goPrev"></div>
          <div class="swiper-button-next swiper-button-black" @click="goNext"></div>
        </div>
      </div>
      <el-divider border-style="dashed"></el-divider>
      <div class="detail-comment-c">
        <span class="detail-comment-tittle">评论列表</span>
        <el-divider border-style="hidden"></el-divider>
        <div style="display: flex; flex-direction: column">
          <div>
            <el-rate :disabled="courseRateDisable" v-model="courseRateVal" clearable size="large" allow-half
                     text-color="#ff9900"
                     show-score :score-template="courseRateVal ? courseRateVal + ' 分' : ''"/>
            <el-button size="small" v-show="!courseRateDisable" @click="openConfirm">评分</el-button>
          </div>
          <el-divider border-style="hidden"></el-divider>
          <div style="width: 50px;height: 100%">
            <el-avatar style="width: 50px;" :size="50" :src="user.avatar ? user.avatar : defaultAvatar"/>
          </div>
          <div style="flex-grow: 1;padding: 10px;">
            <p style="height: 20px;line-height: 20px;color:#fb7299" class="d-c-m-n">
              {{ user.username }}
            </p>
            <el-input v-model="comment" type="textarea" :autosize="{ minRows: 5 }">

            </el-input>
            <el-button size="large" type="primary" style="margin-top: 5px;" @click="publish">发布</el-button>
            <el-divider></el-divider>
          </div>
        </div>
        <div style="display: flex;" v-for="c in comments" :key="c.id">
          <div style="width: 50px;height: 100%">
            <el-avatar style="width: 50px;" :size="50" :src="c.avatar ? c.avatar : c.defaultAvatar"/>
          </div>
          <div style="flex-grow: 1;padding: 10px;">
            <p style="height: 20px;line-height: 20px;color:#fb7299" class="d-c-m-n">
              {{ c.author }}
            </p>
            <p style="color: #000000;font-size: 18px;margin-top: 10px;">
              {{ c.content }}
            </p>
            <p style="color: #6f6f6f;font-size: 18px;margin-top: 10px">2024-12-17</p>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
    </main>
    <BackTop></BackTop>
    <Footer></Footer>
  </div>

</template>

<script setup lang="ts">
import Header from '@/components/header/Header.vue'
import Footer from '@/components/header/Footer.vue'
import BackTop from '@/components/BackTop.vue'
import Breadcrumb from '@/components/Breadcumb.vue'
// import LatestGoods from '@/components/indexDecorate/decorateList/LatestGoods.vue'
import noPic from '@/assets/zanwu.jpg'
import {onMounted, ref} from 'vue'
import {useRouter} from "vue-router";
import {ArrowRight} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox, type TabsPaneContext} from 'element-plus'
import {
  addCourseComment,
  courseCommentsPage,
  courseDetail,
  coursePage,
  coursePlans,
  reserveCourse,
  addCourseRate,
  getCourseRate,
  getRecommendCourses
} from "@/api/course.ts";
import storage from "@/utils/storage.ts";
import defaultAvatar from '@/assets/default.png'
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import paobuji from '@/assets/paobuji.jpg'

const activeTab = ref('first')
const router = useRouter()
const activeName = router.currentRoute.value.path
const comment = ref()
const comments = ref([])
const course = ref({})
const courseId = ref()
const courseName = ref()
const coursePlanArr = ref([])
const user = ref({})
const courseRateVal = ref(null)
const courseRateDisable = ref(false)
const recommenders = ref([])

const reserve = () => {
  const reserveCourseData = {
    courseId: courseId.value,
    courseName: courseName.value,
    memberId: user.value.id,
    status: 0,
  }
  reserveCourse(reserveCourseData).then(res => {
    const code = res.code
    if (code != '00000') {
      ElMessage.error(res.msg)
    } else {
      router.push({
        path: '/reservePay',
        query: {cid: courseId.value, cName: courseName.value, amount: course.value.fees}
      })
    }
  })
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const openConfirm = () => {
  ElMessageBox.confirm(
      '评分后不能修改?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    addCourseRate({userId: user.value.id, courseId: courseId.value, rate: courseRateVal.value}).then(res => {
      if (res.code === '00000') {
        courseRateDisable.value = true
        ElMessage({
          type: 'success',
          message: '感谢参与',
        })
      }
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
  swiperInstance.value = swiper;
}

const onSlideChange = () => {
  console.log('slide change');
}

const goPrev = ()=> {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
  }
}

const goNext = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
  }
}

const publish = () => {
  const commentData = {
    content: comment.value,
    author: user.value.username,
    memberId: user.value.id,
    courseId: router.currentRoute.value.query.cid,
  }
  addCourseComment(commentData).then(res => {
    commentsPage()
  })
}

const commentsPage = () => {
  courseCommentsPage({courseId: courseId.value}).then(res => {
    comments.value = res.data.records;
  })
}

onMounted(() => {
  user.value = JSON.parse(storage.getItem("userInfo"))
  console.log(router.currentRoute.value.query)
  courseId.value = router.currentRoute.value.query.cid
  courseDetail({id: courseId.value}).then(res => {
    course.value = res.data
    courseName.value = res.data.name
  })
  coursePlans({id: courseId.value}).then(res => {
    coursePlanArr.value = res.data
  })
  commentsPage()
  getCourseRate(user.value.id, courseId.value).then(res => {
    console.log('getCourseRate', res)
    if (res.code === '00000' && res.data !== null) {
      courseRateVal.value = res.data.rate
      courseRateDisable.value = true
    }
  })
  getRecommendCourses(user.value.id, courseId.value).then(res=>{
    if(res.code === '00000' && res.data !== null) {
      recommenders.value = res.data
    }
  })
})

</script>
<style scoped>
.main {
  width: 80%;
  position: relative;
  top: 20px;
  margin: auto;
  box-sizing: border-box;
  padding: 2px;
  border-top: 1px solid #4a4949;
  background-color: #fbf8f8;
}

.detail-container {
  display: flex;
  justify-content: start;
  flex-flow: row nowrap;
}

.detail-img-c {
  width: 30%;
  height: 500px;
  text-align: center;
  border-radius: 15px;
  overflow: hidden;
}

.detail-img-c img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.course-content img {
  height: 100%;
  width: 100%;

  object-fit: cover;
}

.pane-c {
  width: 70%;
  flex-grow: 1;
  padding-left: 20px;
}

.detail-tabs {
  font-size: 18px;
  font-weight: bold;
  height: 460px;
  border-bottom: 1px solid #ccc;
}

.tab-p {
  color: #000000;
  word-wrap: break-word;
  word-break: break-all;
}

.detail-comment-c {
  border: 1px solid #ccc;
  padding-left: 10px;
  min-height: 800px;
}

.detail-comment-tittle {
  height: 50px;
  font-size: 20px;
  color: #938f8f
}

.recommender-container {
  height: 300px;
  display: flex;
  position: relative;
  flex-direction: column;
}

.recommender {
  height: 50px;
  line-height: 50px;
  color: #1c1c1c;
  margin-left: 20px;
  font-size: 30px;
  position: relative;
  width: 8%;
}

.recommender::after {
  content: "";
  background-color: #df801f;
  height: 2px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  transform: translateY(-100%);
}

.recommender-list {
  min-height: 240px;
  padding: 10px;
  width: 100%;
  background: #fff3f3;
}
.custom-swiper-button-prev, .custom-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #FFFFFF;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

.custom-swiper-button-next {
  right: 20px;
}

.custom-swiper-button-prev {
  left: 20px;
}
</style>
